<template>
    <div class="w-100" v-if="isready">
        <topHeader title="三菱镭射自动化 — 工单看板"></topHeader>
        <div class="update_time">更新时间: {{ updateTimeNow }}</div>
        <div class="work_status--wrap m-2">
            <div class="shade_box"></div>
            <table style="border-collapse:separate;width:100%;" class="table-wrap table1">
                <tr class="work_status--header">
                    <th>机器</th>
                    <th>工单</th>
                    <th>生产数板量</th>
                    <th>生产面</th>
                    <th>不良品数</th>
                    <th>实际完成进度</th>
                    <th>状态</th>
                    <th class="w-10">停机原因</th>
                </tr>
                <tbody class="w-100 work_status--content" :style="isScorll ? 'animation-duration: ' + duration + 's' : ''">
                    <tr v-for="(item, index) in newmachineList" :key="index">
                        <td>
                            <img class="machine-img" :src="`${item.img}`" />
                            <p style="margin:0" class="mr-0">{{ item.equipmentName }}</p>
                        </td>
                        <td class="text">{{ item.number || '--' }}</td>
                        <td>{{  item.qty }}</td>
                        <td>{{ item.side || '--' }}</td>
                        <td>0</td>
                        <td>
                            <div class="d-flex flex-column">
                                <div>
                                    <span style="vertical-align: text-bottom;margin-right:1vh;">实际进度</span>
                                    <tempo :width="item.tempo || 0"></tempo>
                                    <span style="vertical-align: text-bottom;margin-left:1vh;">{{ item.tempo > 0
                                        ? item.tempo : 0 }}%</span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="mr-0 py-1 px-2"  :style="{ backgroundColor: `rgba(${machineColor[item.state]},1)` }">{{ machineText[item.state] }}</span>
                        </td>
                        <td class="w-10">{{ item.reason || '--' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <bottomFooter></bottomFooter>
    </div>
</template>
<script setup lang="ts">
import topHeader from '@/components/topHeader/index.vue';
import tempo from '@/components/tempo/index.vue'
import bottomFooter from '@/components/bottomFooter/index.vue';
import $ from 'jquery';
import img1 from '@/assets/img/laserdrill.png';
import img2 from '@/assets/img/ledia6-002.png'
import img3 from '@/assets/img/INSPECTA_COMBO.png'
import { workOrder } from '@/service/api/index'
const newmachineList = ref([]) as EmptyObjectType
const isready = ref(false)
const duration = ref(0)
const isScorll = ref(false)
const timer: any = ref('')
const updateTimeNow = ref('')
const oldmachinelist = ref([]) as EmptyObjectType
const { proxy } = getCurrentInstance() as any 

enum machineColor {
  '64, 157, 104' = 1,
  '40,84,153' = 2,
  '205,0,0' = 3,
  '194,80,208' = 4,
  '95,95,93' = 5
}
enum machineText {
  '生产' = 1,
  '待机' = 2,
  '故障' = 3,
  '保养' = 4,
  '停机' = 5
}

const workOrderList = ref([] as Array<any>)
const workOrdertimer: any = reactive({
  timeData: 0,
  timerData: null,
  intervalData: 180000,
  num: 0
})

const getWorkOrderFresh = async () => {
  let currTimeData = new Date().getTime()
  if ((currTimeData - workOrdertimer.timeData) > workOrdertimer.intervalData || workOrdertimer.timeData === 0) {
    workOrdertimer.timeData = new Date().getTime()
    getWorkOrder()
  }
  workOrdertimer.timerData = requestAnimationFrame(getWorkOrderFresh)
}

onMounted(() => {
    isready.value = true
    getWorkOrderFresh()
    
})

const realTimeFresh = () => {
    clearTimeout(timer.value)
    getData()
    timer.value = setTimeout(function () {
        realTimeFresh()
    }, 300000)
}
const findImg = (name:string)=>{
    let nameArr:Array<string> = ['收放','钻靶','双台面']
    for(let i=0;i<nameArr.length;i++){
        if(name.includes(nameArr[i])){
            return i+1
        }
    }
    return 0
}
const getWorkOrder = async () => {
  let res2: any = await workOrder({ page: 1, pageSize: 50 })
//   let imgArr:Array<any> = [img1,img2,img3]

  res2.result.items.map((item:any)=>{
    let url = new URL(`@/assets/img/img${findImg(item.equipmentName)}.png`,import.meta.url)
    item.img = url //imgArr[findImg(item.equipmentName)]
  })
  if (res2 && res2.result) workOrderList.value = res2.result.items
  setMachineData(workOrderList.value)
}



//初始化数据
const setMachineData = async (machineList: any) => {
    for (let i = 0; i < machineList.length; i++) {
        
        machineList[i]['tempo'] = 0
        machineList[i]['quantity'] = 60
        if (machineList[i].qty != 0 && machineList[i].quantity != 0) {

            if (machineList[i].quantity <= 0) {
                machineList[i].side = "--";
            } else if (machineList[i].qty <= 0) {
                machineList[i].side = "A";
            } else if (machineList[i].var1 != "") {
                if (machineList[i].var1 == "0") {
                    machineList[i].side = "A";
                } else if (machineList[i].var1 == "1") {
                    machineList[i].side = "B";
                }
            } else {
                if (machineList[i].qty * 2 > machineList[i].quantity) {
                    machineList[i].side = "B";
                } else {
                    machineList[i].side = "A";
                }
            }

            let tempo: any = machineList[i].qty / machineList[i].quantity
            let progress_num = Math.floor(tempo * 100)
            machineList[i]['tempo'] = progress_num
            if (i == machineList.length - 1) {
                newmachineList.value = machineList
            }
        }

    }
    newmachineList.value = machineList

    console.log(newmachineList.value)
    $(document).ready(function () {
        var contentHeight = $('.work_status--content').height()
        var totalHeight = $('.work_status--wrap').height()
        isScorll.value = (totalHeight - contentHeight) <= 65
        //设置自动滚动
        proxy.$common.hoverAction('.work_status--content', '.work_status--content')
        proxy.$common.hoverAction('.work_status--contents', '.work_status--content')
    })
    nextTick(() => {
        duration.value = newmachineList.value.length * 7
    })

}
const getData = async () => {
}
</script>

<style lang="less">
.work_status--wrap {
    position: relative;
    color: white;
    height: 88%;
    overflow: hidden;
}

.work_status--header {
    position: relative;
    z-index: 111;
    font-size: 1rem;
}

.update_time {
    font-size: 1rem;
}

.table-header {
    position: fixed;
    width: 100%;
    top: 10%;
}

.work_status--content {
    font-size: .9rem;
}

.work_status--content td {
    text-align: center;
}

.machine-img {
    height: 4rem;
}

.mr-0 {
    margin: 0 !important;
}

.shade_box {
    z-index: 111;
    position: absolute;
    left: 0;
    top: 0px;
    right: 0;
    background: #0a2a2c;
    height: 4rem;
    margin: 0 1rem;
}

.update_time {
    position: fixed;
    top: 5%;
    right: 2%;
    color: #fff;
    height: 4vh;
    line-height: 4vh;
}

.work_status--content {
    background-color: #233b3e;
    text-align: center;
    color: white;
    position: relative;
    width: 100%;
    top: 0%;
    z-index: 10;
    overflow: hidden;

    animation-name: scrollTop;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

@keyframes scrollTop {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-70%);
    }
}

.work_status--header th {
    padding: 0rem 0;
}

.work_status--content td {
    padding: .5rem 0;
}

.table-wrap {
    border-spacing: 0 1.2rem;
    padding: 0 1rem;
}
</style>